<template>
  <div>
    <!-- 各地城市就业人数 -->
    <div class="get_a_job_box">
      <!-- 标题 -->
      <TitleBar> 各地城市就业人数 </TitleBar>
      <div id="get_a_job" style="width: 350px; height: 180px"></div>
    </div>
    <!-- 全省退役人情况 -->
    <div class="retirement_box">
      <!-- 标题 -->
      <TitleBar> 全省退役人情况 </TitleBar>
      <div id="retirement" style="width: 350px; height: 180px"></div>
    </div>
    <!-- 退役军人热门城市 -->
    <div class="hot_city_box">
      <!-- 标题 -->
      <TitleBar> 退役军人热门城市 </TitleBar>
      <div id="hot_city" style="width: 350px; height: 180px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import TitleBar from '@/components/TitleBar.vue'
import EventBus from "@/util/event-bus.js";

export default {
  name: 'LeftBar',
  data() {
    return {
      // 地区切换 
      selected_area: '全国',

      // 左1 柱状图 上划
      get_a_jobchart_echart: null,  // echart 实例
      get_a_job_option: null,       // option 配置项
      get_a_job_time_out: null,     // 定时器实例 
      // 数据 
      get_a_job_data: {
        Xdata: [4261, 3508, 2005, 3008, 300, 400, 5000, 3000, 4000, 1000, 3000, 2300],
        Ydata: ['No.1  杭州', 'No.2  宁波', 'No.3  丽水', 'No.4  温州', 'No.5  贵阳', 'No.6  贵阳', 'No.7  贵阳', 'No.8  贵阳', 'No.0  贵阳', 'No.10  贵阳', 'No.11  贵阳', 'No.12  贵阳'],
      },


      // 左2 饼状图 高亮
      retirement_data: [
        { value: 299, name: '转业士兵' },
        { value: 1048, name: '退役士兵' }
      ],
      flag: false, // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消

      retirement_chart: null,// echart　实例 
      startCharts: null,  // 定时器实例 

      // 左3 柱状图 
      hot_city_chart: null,
      hot_city_data: {
        Xdata: [4261, 3508, 2005, 3008, 2000],
        Ydata: ['No.1  杭州', 'No.2  宁波', 'No.3  丽水', 'No.4  温州', 'No.5  贵阳']
      }

    }
  },
  // 组件注册 
  components: { TitleBar },

  mounted() {
    // 左1 柱状图 上划
    this.init_get_a_job(this.get_a_job_data)
    // 左2 饼图
    this.init_retirement(this.retirement_data)
    // 左3 柱状图 
    this.init_hot_city(this.hot_city_data)

    // 地区监听接收消息
    EventBus.$on("selected_area", (selected_area) => {
      this.selected_area = selected_area
      console.log(selected_area);
    });
  },

  methods: {
    // 左1 柱状图 上划
    init_get_a_job(get_a_job_data) {
      this.get_a_jobchart_echart = echarts.init(document.getElementById('get_a_job'))
      if (this.get_a_jobchart_echart == null) {
        this.get_a_jobchart_echart = echarts.init(document.getElementById('get_a_job'))
      }

      this.get_a_job_option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 设置图表的位置
        grid: {
          x: 20, // 左间距
          y: 30, // 上间距
          x2: 10, // 右间距
          y2: 10, // 下间距
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },
        //坐标轴类型(类目轴)
        xAxis: {
          type: 'value',
          max: 6000,
          // 坐标轴刻度
          axisLabel: {
            show: false
          },
          //坐标轴线
          axisLine: {
            show: false
          },
          //是否显示坐标轴刻度
          axisTick: { show: false },

          //是否显示网格线
          splitLine: {
            show: false
          },
          // 坐标轴刻度标签
          axisLabel: {
            show: false // 是否显示刻度标签 默认显示
          }
        },
        // 左侧Y轴
        yAxis: [
          {
            max: 1000,
            type: 'category',
            //是否是反向坐标轴
            inverse: true,
            data: get_a_job_data.Ydata,
            // 文字刻度
            axisLabel: {
              show: true,
              formatter: '{value}',
              color: '#ffffff'
            },
            offset: 10,
            nameTextStyle: {
              fontSize: 15
            },
            splitLine: { show: false },
            axisTick: { show: false },
            //坐标轴线
            axisLine: {
              show: false
            }
          },
          // 右侧Y轴
          // {
          //   type: 'category', // 坐标轴类型
          //   inverse: true, //是否是反向坐标轴
          //   // 坐标轴轴线
          //   axisLine: {
          //     show: false
          //   },
          //   // 坐标轴刻度
          //   axisTick: {
          //     show: false
          //   },
          //   // 坐标轴刻度标签
          //   axisLabel: {
          //     show: true, // 是否显示刻度标签 默认显示
          //     fontSize: 12, // 文字的字体大小
          //     color: '#cdd3ee', // 刻度标签文字的颜色
          //     // 使用字符串模板，模板变量为刻度默认标签 {value}
          //     formatter: '{value}人'
          //   },
          //   data: Xdata
          // }
        ],
        //滑动条
        dataZoom: [
          {
            yAxisIndex: 0,  //这里是从X轴的0刻度开始
            show: false,    //是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0,  // 从头开始。
            endValue: 4     // 一次性展示5个。
          }
        ],
        // 个性设置
        series: [
          {
            name: '就业人数',
            type: 'bar',
            barMaxWidth: 10,
            data: get_a_job_data.Xdata,
            barWidth: 8,
            barGap: 10,
            smooth: true,
            // 内柱填充
            showBackground: true,
            label: {
              show: true,
              color: '#15ceb8',
              position: 'right',
              fontSize: '11px',
              formatter: '{c}人'
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7
              },
              //颜色渐变
              normal: {
                barBorderRadius: 7,
                color: '#20fae5'
                // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //   { offset: 0, color: '#040C3B' },
                //   { offset: 0.5, color: '#6D3F46' },
                //   { offset: 1, color: '#E4765D' }
                // ])
              }
            }
          },
          // 发光小圆点
          {
            type: 'pictorialBar',     // 系列类型
            name: '圆点',             // 系列名称, 用于tooltip的显示, legend 的图例筛选
            symbol: 'circle',        // 标记的图形
            symbolSize: 10,          // 标记的大小
            symbolOffset: [0, 0],    // 标记的偏移
            symbolPosition: 'end',   // 标记的位置
            // 图形的样式
            itemStyle: {
              color: '#56D0E3',
              borderColor: '#56D0E3',  // 阴影边框颜色
              shadowColor: '#1d63a3',  // 阴影颜色
              shadowBlur: 10,          // 图形阴影的模糊大小
              shadowOffsetX: 2,        // 阴影水平方向上的偏移距离
              shadowOffsety: 10
            },
            z: 10,                    // 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖
            data: this.get_a_job_Xdata               // 系列中的数据内容数组
          }
        ],
        // 动画设置 
        // animationDuration: 0,
        // animationDurationUpdate: 1000,
        // animationEasing: "linear",
        // animationEasingUpdate: "linear",
      }
      // 图表绘制 
      this.get_a_jobchart_echart.setOption(this.get_a_job_option)

      // 销毁定时器 
      this.get_a_job_time_out && clearInterval(this.get_a_job_time_out)
      // 自动滚动
      this.get_a_job_time_out = setInterval(() => {
        if (this.get_a_job_option.dataZoom[0].endValue == get_a_job_data.Xdata.length) {
          this.get_a_job_option.dataZoom[0].endValue = 4
          this.get_a_job_option.dataZoom[0].startValue = 0
        } else {
          this.get_a_job_option.dataZoom[0].endValue = this.get_a_job_option.dataZoom[0].endValue + 1
          this.get_a_job_option.dataZoom[0].startValue = this.get_a_job_option.dataZoom[0].startValue + 1
        }
        // 重新绘制 
        this.get_a_jobchart_echart.setOption(this.get_a_job_option)
      }, 4000)
    },

    // 左2 环形图
    init_retirement(retirement_data) {
      var _this = this;
      this.retirement_chart = echarts.init(document.getElementById('retirement'))
      var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var charPie3currentIndex = 0  // 当前高亮

      var option = {
        legend: {
          icon: 'rect',
          top: 'middle',
          right: '15%',
          orient: 'vertical',
          itemHeight: 5,
          itemWidth: 5,
          textStyle: {
            color: '#ececec'
          }
        },
        grid: {
          x: -51, // 左间距
          y: 0, // 上间距
          x2: 10, // 右间距
          y2: 0, // 下间距
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },
        color: ['#09d0fb', '#91CC75', '#95f8fe', '#f9f390', '#ecfeb7'],
        series: [
          {
            type: 'pie',
            radius: ['15%', '60%'],
            center: ['40%', '50%'],
            selectedMode: 'single',
            data: retirement_data,
            //  饼图item 块颜色设置
            color: ['#0084ff', '#00ceec'],
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\r\n\n{c}人',
              textStyle: {
                fontSize: 12
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold',
                color: '#f4fdfe'
              }
            },
            itemStyle: {
              borderRadius: 9,
              borderColor: 'break',
              borderWidth: 3
            },
            labelLine: {
              show: false
            }
          }
        ]
      }
      // 此处是echarts实例化
      this.retirement_chart.setOption(option)

      // 2、鼠标移动上去的时候的高亮动画
      this.retirement_chart.on('mouseover', function (param) {
        isSet = false
        clearInterval(_this.startCharts)
        // 取消之前高亮的图形
        _this.retirement_chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })

        charPie3currentIndex = param.dataIndex
        // 高亮当前图形
        _this.retirement_chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

      })
      // 3、自动高亮展示
      var chartHover = function () {
        var dataLen = _this.retirement_data.length
        // 取消之前高亮的图形
        _this.retirement_chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
        charPie3currentIndex = (charPie3currentIndex + 1) % dataLen
        // 高亮当前图形
        _this.retirement_chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
        // 显示 tooltip
        _this.retirement_chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
      }

      this.startCharts && clearInterval(this.startCharts)

      this.startCharts = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      this.retirement_chart.on('mouseout', function (param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000)
          isSet = true
        }
      })
    },

    // 左三  柱状图
    init_hot_city(hot_city_data) {
      //计算总数
      let sum = 0
      let arr = this.hot_city_data.Xdata
      for (var i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      let option
      this.hot_city_chart = echarts.init(document.getElementById('hot_city'))
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        //坐标轴类型(类目轴)
        xAxis: {
          type: 'value',

          // 坐标轴刻度
          axisLabel: {
            show: false
          },
          //坐标轴线
          axisLine: {
            show: false
          },

          //是否显示坐标轴刻度
          axisTick: { show: false },

          //是否显示网格线
          splitLine: {
            show: false
          },
          // 坐标轴刻度标签
          axisLabel: {
            show: false // 是否显示刻度标签 默认显示
          }
        },

        // 设置图表的位置
        grid: {
          x: 20, // 左间距
          y: 30, // 上间距
          x2: 10, // 右间距
          y2: 10, // 下间距

          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },

        // 左侧Y轴
        yAxis: [
          {
            type: 'category',
            inverse: true, //是否是反向坐标轴
            data: this.hot_city_data.Ydata,
            // 文字刻度
            axisLabel: {
              show: true,
              formatter: '{value}',
              color: '#ffffff'
            },
            offset: 10,
            nameTextStyle: {
              fontSize: 15
            },
            splitLine: { show: false },
            axisTick: { show: false },
            //坐标轴线
            axisLine: {
              show: false
            }
          },
          // 右侧Y轴
          {
            type: 'category', // 坐标轴类型
            inverse: true, //是否是反向坐标轴
            // 坐标轴轴线
            axisLine: {
              show: false
            },
            // 坐标轴刻度
            axisTick: {
              show: false
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 12, // 文字的字体大小
              color: '#cdd3ee', // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: function (params) {
                return ((params / sum) * 100).toFixed(0) + '%'
              }
            },
            data: this.hot_city_data.Xdata
          }
        ],

        series: [
          // 个性设置
          {
            name: '就业人数',
            type: 'bar',
            barMaxWidth: 10,
            data: this.hot_city_data.Xdata,
            barWidth: 8,
            barGap: 10,
            smooth: true,
            // 内柱填充
            showBackground: true,

            // label: {
            //   show: true,
            //   position: 'right',
            //   // position: [235, -2],
            //   //这是关键，在需要的地方加上就行了
            //   formatter: function (params) {
            //     return ((params.value / sum) * 100).toFixed(0) + '%'
            //   }
            // },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7
              },
              //颜色渐变
              normal: {
                barBorderRadius: 7,
                color: '#20fae5'
              }
            }
          }
        ]
      }

      this.hot_city_chart.setOption(option)
    }
  },

  watch: {
    selected_area: {
      handler(newValue, oldValue) {  //newValue 新的值，oldValue变化前的值


        this.get_a_job_data = {
          Xdata: [4261, 3508, 2005, 3008, 300, 400],
          Ydata: ['No.1  长春', 'No.2  吉林', 'No.3  农安', 'No.4  四平', 'No.5  榆树', 'No.6  北湖']
        }
        // 图一 
        this.get_a_jobchart_echart.dispose()
        this.init_get_a_job(this.get_a_job_data)

        // 图二 
        this.retirement_data = [
          { value: 1084, name: '吃饭' },
          { value: 1048, name: '睡觉' }
        ]
        this.retirement_chart.dispose()
        this.init_retirement(this.retirement_data)

        // 图三 
        this.hot_city_chart.dispose()

        this.hot_city_data = {
          Xdata: [4261, 3508, 2005, 3008, 300],
          Ydata: ['No.1  长春', 'No.2  吉林', 'No.3  农安', 'No.4  四平', 'No.5  榆树']
        }
        this.init_hot_city(this.hot_city_data)




      },
      // immediate:true
    },
  }
}
</script>

<style lang="scss" scoped>
// 左一
.get_a_job_box,
.retirement_box,
.hot_city_box {
  overflow: hidden;
}
</style>
